<template>
  <div>
    <section class="main isPc">
      <section class="prcType">
        <p class="pTitle">
          <router-link tag="a" to="/">首页</router-link> - 商品列表</p>
        <div class="loading" v-if="loadStart"></div>
        <div class="info" v-if="!loadStart">
          <div class="typeTop" v-if="allList">
            <div class="left">
              排序方式：
              <span @click="getStart(1,'sale_count')" :class="{active:getKey==1}">销量</span>
              <span @click="getStart(2,'goods_price')" :class="{active:getKey==2}">价格</span>
              <span @click="getStart(3,'updated_at')" :class="{active:getKey==3}">新品</span>
            </div>
            <div class="right">
              <span class="num">共{{allNum}}件商品</span>
              <span :class="{none:onNum==1}" class="click pageLeft" @click="lastPage"></span>
              <span>{{onNum}}/{{allPage}}页</span>
              <span :class="{none:onNum==allPage}" class="click pageRight" @click="nextPage"></span>
            </div>
          </div>
          <div class="typeList" v-if="allList">
            <ul>
              <li v-for="item in prcList">
                <div v-if="item.goods_number==0" class="prcNone">
                  <p>售罄</p>
                </div>
                <a target="_blank" :href="'/prcShow?id='+item.id" >
                  <img v-lazy="item.goods_logo">
                  <p class="title">{{item.goods_name}}</p>
                  <p class="price">£{{item.goods_price|allPrice}}</p>
                </a>
              </li>
            </ul>
          </div>
          <div class="pageList" v-if="allList">
            <span :class="{none:onNum==1}" class="pageLeft" @click="lastPage"></span>
            <span :class="{active:item==onNum}" v-for="item in pageList" @click="getPage(item)">{{item}}</span>
            <span :class="{none:onNum==allPage}" class="pageRight" @click="nextPage"></span>
          </div>
          <div class="noneList" v-if="!allList">
            没有相关商品
          </div>
        </div>
      </section>
    </section>

    <section class="prcTypeWap isWap">
      <div class="loading" v-if="loadStart"></div>
      <p class="wapTopTitle" v-for="item in wapNav" v-if="item.id==wapId">{{item.category_name}}</p>
      <div class="wapList" v-if="item.id==wapId" v-for="item in wapNav">
        <div>
          <select class="wapSelect" v-model="wapIdTow">
            <option value="1">所有商品</option>
            <option :value="list" v-for="(list,index) in item.son">{{list.category_name}}</option>
          </select>
          <!-- <p @click="wapNavShow">{{wapTxtle}} <span></span></p>
          <ul v-if="wapTxtleStaute">
            <li @click="postId(list.id,list.category_name)" v-for="list in item.son">{{list.category_name}}</li>
          </ul> -->
        </div>
      </div>
      <div class="typeList" v-if="allList">
        <ul>
          <li v-for="item in prcList">
            <div v-if="item.goods_number==0" class="prcNoneWap">
              <p>售罄</p>
            </div>
            <div class="wapBuy">
              <span class="spanA" @click="wapCartOpen"></span>
              <p class="wapBuyOn"><span class="spanB" @click="PostCart(item)"></span><input v-model="wapBuyNum" type="text" name=""></p>
            </div>
            <a target="_blank" :href="'/prcShow?id='+item.id" >
              <img v-lazy="item.goods_logo">
              <p class="title">{{item.goods_name}}</p>
              <p class="price">£{{item.goods_price|allPrice}}</p>
            </a>
          </li>
        </ul>
      </div>
      <div class="right">
        <span :class="{none:onNum==1}" class="click pageLeft" @click="lastPage"></span>
        <span class="center">{{onNum}}/{{allPage}}</span>
        <span :class="{none:onNum==allPage}" class="click pageRight" @click="nextPage"></span>
      </div>
    </section>
  </div>
  
</template>
<script>
import { mapState } from 'vuex'
import { Swiper, SwiperItem } from 'vux'
import { Get,Post } from '@/config/api.js'
import axios from 'axios'
export default {
  name: 'hello',
  data() {
    return {
      getKey:0,//排列
      lanMuVal: '',//二级栏目
      lanMuValAll: '',//一级栏目
      swiperItemIndex: 1,
      loadStart: false,
      prcStart:'goods_created_at',
      prcList: [], //商品数据
      prcLoad: true, //判断是否在加载中
      prcNum: 20, //加载数量
      onNum: 1,
      allNum: '', //商品总数量
      allPage: 1,
      loadShow: false, //加载中
      noMore: false, //没有更新商品
      //手机端
      navTwo:[],
      wapTitle:'一级栏目',
      wapId:'',//路由传过来的id
      wapTxtle:'所有商品', //当前二级栏目名称
      wapTxtleStaute:false,
      wapBuyNum:1,
      wapIdTow:1,
      wapAllId:{
        id:1,
        one:true
      }
    }
  },
  computed: {
    ...mapState({
      wapNav: state => state.wapNavData,
      login: state => state.login,
      headerH: state => state.headerH,
      headerShow: state => state.headerShow,
      cartShow: state => state.cartStart
    }),
    allList() {
      if (this.prcList) {
        return true
      } else {
        return false
      }
    },
    pageList() {
      let arr = [];
      for (let i = 0; i < this.allPage; i++) {
        arr.push(i + 1)
      }
      return arr
    }
  },
  components: {
    Swiper,
    SwiperItem
  },
  mounted() {
    this.wapId=this.$route.query.top
    this.wapAllId.id=this.$route.query.top

    this.getData(this.$route.query.id)
    this.getDataAll(this.$route.query.top)

    $(document).on('click','.spanA',function(){
      $('.wapBuyOn').removeClass('on')
      $(this).next('p').addClass('on')
    })

    $(document).on('click','.spanB',function(){ 
        $('.wapBuyOn').removeClass('on')
        $('.wapBuy').removeClass('on')
      })
  },
  watch: {
    '$route.query.id' (val) {
      this.lanMuVal = val
      this.getData(this.lanMuVal,1)
    },
    '$route.query.top' (val) {
      this.wapId=val
    },
    //传值id改变，重新请求
    wapId:function(){
      this.wapTxtle="所有商品"
      this.getDataAll(1)
    },
    wapIdTow:function(){
      if(this.wapIdTow==1){
        this.lanMuVal=this.wapId
        this.getDataAll(1)
      }else{
        this.lanMuVal=this.wapIdTow.id
        this.getPaiClick(1)
      }
      
      
    }
  },
  methods: {
    //获取商品
    async getData(val) {
      this.lanMuVal = val
      this.getPai(1)
    },
    //获取商品
    async getDataAll(val) {
      this.lanMuVal = val
      this.getPaiAll(1)
    },
    //category_id  id
    //goods_price  价格
    //category_id  销量
    //第几页
    async getPai(num) {
      
      if (this.$route.query.id != undefined) {
          this.$store.dispatch("isLoading",true)
          let reg = await Get('/goods?_include=category,goods_zone,goods_image,goods_describe&is_sale=1&_sort=-'+this.prcStart+'&category_id=' + this.lanMuVal + '&page=' +num , this.$store.state.token)
          this.onNum = reg.meta.pagination.current_page
          this.allNum = reg.meta.pagination.total
          this.allPage = reg.meta.pagination.total_pages
          this.prcList = reg.data
          this.lanMuVal=this.$route.query.id
          window.scrollTo(0,0)
          this.$store.dispatch("isLoading",false)
      }

    },
    async getPaiClick(num) {
        this.$store.dispatch("isLoading",true)
        let reg = await Get('/goods?_include=category,goods_zone,goods_image,goods_describe&is_sale=1&_sort=-'+this.prcStart+'&category_id=' + this.lanMuVal + '&page=' +num , this.$store.state.token)
        this.onNum = reg.meta.pagination.current_page
        this.allNum = reg.meta.pagination.total
        this.allPage = reg.meta.pagination.total_pages
        this.prcList = reg.data
        this.$store.dispatch("isLoading",false)
    },
    async getPaiAll(num) {
      if (this.$route.query.top != undefined) {
          this.$store.dispatch("isLoading",true)
          let reg = await Get('/goods?_include=category,goods_zone,goods_image,goods_describe&is_sale=1&_sort=-'+this.prcStart+'&category_one=' + this.wapId + '&page=' +num , this.$store.state.token)

          this.onNum = reg.meta.pagination.current_page
          this.allNum = reg.meta.pagination.total
          this.allPage = reg.meta.pagination.total_pages
          this.prcList = reg.data
          //获取二级栏目第一个
/*          for(let i=0;i<this.wapNav.length;i++){
            if(this.wapNav[i].id==this.wapId){
              this.wapTxtle=this.wapNav[i].son[0].category_name
            }
          }*/
          document.body.scrollTop =0
          this.$store.dispatch("isLoading",false)
      }
    },
    getStart(num,val){
      this.getKey=num
      this.prcStart=val
      this.getPai(1)
    },
    //下一页
    async nextPage() {
      
      if (this.onNum < this.allPage) {
          this.onNum++
          this.getPai(this.onNum)
          this.getPaiAll(this.onNum)
          //console.log(this.onNum)
      }
    },
    //上一页
    async lastPage() {

      if (this.onNum > 1) {
          this.onNum--
          this.getPai(this.onNum)
          this.getPaiAll(this.onNum)
      }

    },
    //上一页wap
    async lastPageWap() {
      if (this.onNum > 1) {
          this.onNum--
          this.getPai(this.onNum)
          this.getPaiAll(this.onNum)
          console.log(this.onNum)
      }
    },
    //下一页wap
    async nextPageWap() {
      if (this.onNum < this.allPage) {
          this.onNum++
          this.getPai(this.onNum)
          this.getPaiAll(this.onNum)
          console.log(this.onNum)
      }
    },
    //跳到第几页
    async getPage(val) {
      this.getPai(val)
    },
    //选择二级栏目
    postId(id,val){
      this.lanMuVal=id
      this.getPaiClick(1)
      this.wapTxtle=val
      this.wapTxtleStaute=false
    },
    //点击显示二级栏目
    wapNavShow(){
      this.wapTxtleStaute=true
    },
    //更新购物车信息
    async getNowWap(){
      let reg=await Get('/carts?_sort=id&_pagination=false',this.$store.state.token)
        let all=0
        for(let i=0;i<reg.data.length;i++){
          all+=reg.data[i].amount
        }
        let data={
          num:reg.data.length,
          price:all
        }
        this.$store.dispatch("wapCart",data)
    },
    //加入购物车
    async PostCart(val){
      if(this.vLogin()){
          if(this.wapBuyNum<=val.goods_number){
            let date={
              "goods_id":val.id,
              "goods_count":this.wapBuyNum
            }
            this.$store.dispatch("isLoading",true)
            await Post('/carts',this.$store.state.token,date)
            this.$store.dispatch("isLoading",false)
            alert('加入成功！')
            this.getNowWap()
          }else{
            alert('商品库存不足')
            this.wapBuyNum=val.goods_number
          }
      }else{
        this.$router.push({ path: '/login'})
      }
    },
    wapCartOpen(){
      this.wapBuyNum=1
    },

  }
}

</script>
